import { TabBar } from 'antd-mobile'
import {
    AppOutline,
    BellOutline,
    UserOutline,
    AppstoreOutline,
} from 'antd-mobile-icons'
import {
 ShopOutlined
} from '@ant-design/icons';
import {  useLocation, useNavigate } from 'react-router-dom'
function Tabbar() {
    const nav=useNavigate()
    const location = useLocation()
    const tabs = [
        {
            key: 'home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: 'message',
            title: '消息',
            icon: <BellOutline />,
        },
        {
            key: 'store',
            title: '商店',
            icon: <ShopOutlined />,
        },
           {
            key: 'todo',
            title: '患者案例',
            icon: <AppstoreOutline />,
        },
        
        {
            key: 'my',
            title: '订单',
            icon: <UserOutline />,
        },
    ]       
    return ( 
        <div style={{
            position:'fixed', 
            left:0, 
            right:0, 
            bottom:0, 
            width:'100%', 
            background:'#fff',
            zIndex:999,
            boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)',
            borderTop: '1px solid rgba(0, 0, 0, 0.05)'
        }}>
            <TabBar onChange={(key)=>{nav(key)}} activeKey={location.pathname?location.pathname.split('/')[1]:''} >
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}
export default Tabbar